<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航</title>
    <script type="text/javascript" src="./js/vue.js"></script>
    <script type="text/javascript" src="./js/axios.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #canvas {
            background-image: url("./img/bg.png");
            width: 962px;
            height: 527px;
        }

    </style>
</head>
<html>
<body>
<canvas id="canvas" width="962" height="527"></canvas>
<hr/>
<a href="reservation.html" target="_blank">预约/缴费页面</a><br/>
<a href="index.html" target="_blank">所有车位实时状态页面</a>
</body>
<script type="text/javascript">
    // var vs = [
    //     {"x": 478, "y": 450},
    //     {"x": 478, "y": 384},
    //     {"x": 478, "y": 318},
    //     {"x": 218, "y": 318},
    //     {"x": 218, "y": 264},
    //     {"x": 138, "y": 264}
    // ];//最短路径经过的所有节点
    window.onload = function () {
        axios.get("http://localhost:8080/park/path").then(function (response) {
            var vs = response.data.res;
            if (vs != null) {
                showShortestPath(vs);
            } else {
                console.log("没有路径导航信息");
            }
            //alert(response.data.msg);

        }, function (err) {
            console.log(err);
        });
    };

    //画最短路径
    function showShortestPath(vs) {
        var clock = document.querySelector('#canvas');
        if (clock.getContext) {
            var ctx = clock.getContext('2d');
            ctx.save();
            ctx.strokeStyle = '#228B22';
            ctx.lineWidth = 10;
            ctx.beginPath();
            ctx.moveTo(vs[0].x, vs[0].y);//画笔移动到起点
            for (var i = 1; i < vs.length; i++) {
                ctx.lineTo(vs[i].x, vs[i].y);//画下一个点之间的折线
            }
            ctx.stroke()
            //在倒数两个点之间画箭头
            drawArrow(ctx,
                vs[vs.length - 2].x, vs[vs.length - 2].y,
                vs[vs.length - 1].x, vs[vs.length - 1].y,
                30, 30, 10, "#228B22");
            //drawArrow(ctx, 182, 217, 108, 217, 30, 30, 10, "#228B22");
            ctx.stroke()
        }

        //画箭头的函数
        function drawArrow(ctx, fromX, fromY, toX, toY, theta, headlen, width, color) {
            var theta = theta || 30,
                headlen = headlen || 10,
                width = width || 1,
                color = color || '#000',
                angle = Math.atan2(fromY - toY, fromX - toX) * 180 / Math.PI,
                angle1 = (angle + theta) * Math.PI / 180,
                angle2 = (angle - theta) * Math.PI / 180,
                topX = headlen * Math.cos(angle1),
                topY = headlen * Math.sin(angle1),
                botX = headlen * Math.cos(angle2),
                botY = headlen * Math.sin(angle2);
            ctx.save();
            ctx.beginPath();
            var arrowX, arrowY;
            ctx.moveTo(fromX, fromY);
            ctx.lineTo(toX, toY);
            arrowX = toX + topX;
            arrowY = toY + topY;
            ctx.moveTo(arrowX, arrowY);
            ctx.lineTo(toX, toY);
            arrowX = toX + botX;
            arrowY = toY + botY;
            ctx.lineTo(arrowX, arrowY);
            ctx.strokeStyle = color;
            ctx.lineWidth = width;
            ctx.stroke();
            ctx.restore();
        }
    }
</script>
</html>

